<template>
  <div v-if="hasSection">
    <div v-for="item in sections" :key="item.id" class="wrap">
      <div class="head">
        <span class="title">{{ item.title }}</span>        
      </div>
      <div class="body">
        <list-scroller ref="epScroller" scrollX>
          <ul class="section-list">
            <li
              v-for="ep in item.episodes"
              :key="ep.id"
              :class="{active: currentEpisodeId === ep.id}"
              @click="selectSection(ep)"
            >
              <div class="cover">
                <img class="img" v-lazy="ep.cover+'@234w_146h'" alt="ep.long_title">
              </div>
              <div class="desc">{{ ep.long_title || ep.title }}</div>
            </li>
          </ul>
        </list-scroller>
      </div>      
    </div>
  </div>
</template>

<script>
import ListScroller from '@/components/list-scroller/ListScroller.vue'
export default {
  name: 'BangumiPart',
  components: {
    ListScroller
  },
  props: {
    info: {
      type: Object
    }
  },
  data () {
    return {   
    }
  },
  computed: {
    hasInfo () {
      return this.info !== null
    },
    hasSection () {
      let flag = false
      if (this.hasInfo && this.info.mediaInfo && this.info.mediaInfo.section) {
        flag = true
      }
      return flag
    },
    sections () {
      let arr = []
      if (this.hasSection) {
        arr = this.info.mediaInfo.section
      }
      return arr
    },
    currentEpisodeId() {
      return this.hasInfo ? this.info.epInfo.id : -1
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.focusEp()
    })
  },
  methods: {
    focusEp() {
      const length = this.$refs.epScroller.length
      for (let i = 0; i < length; i++) {
        const epScroller = this.$refs.epScroller[i]
        const $el = epScroller.$el.querySelector('.active')
        if ($el) {
          epScroller.scrollToElement($el, 300)
          break
        }
      }
    },
    selectSection (section) {
      this.$emit('select-section', section)
    }
  }
}
</script>

<style lang="scss" scoped>
   .wrap{
    padding: {
      left: 10px;
      right: 10px;
    }
    @include border1px (#e7e7e7, 0 0 1px 0);
    .head{
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  }
  .more{
    font-size: 13px;
    color: $color-text-secondary;
    .fa{
      font-size: 16px;
    }
  }
  .title{
    padding: {
      top: 10px;
      bottom: 10px;
    }
    font: {
      size: 16px;
      weight: 700;
    }
  }
  .section-list{
    white-space: nowrap;
    padding-bottom: 16px;
    li{
      display: inline-block;
      vertical-align: top;
      margin-right: 10px;
      color: $color-text-regular;
      width: 117px;
      &.active{
        color: $theme-color;
      }
    }
    .cover{
      @include cover(117, 73, 5px);
      width: 100%;
      height: 73px;
      background: {
        color: $color-grey;
        size: 36%;
        image: url('~@/assets/placeholder.png');
        repeat: no-repeat;
        position: 50%;
      }
    }
    .desc{
      padding-top: 4px;
      @include max-lines(2);
      font-size: 12px;      
      white-space: normal;
    }
  }  
</style>
